<template>
  <el-dialog
    v-model="props.deviceType"
    title="新增设备类型"
    width="25%"
    :show-close="false"
  >
    <el-form
      :model="purForm"
      :rules="rules"
      ref="purFormRef"
      @submit.native.prevent
    >
      <el-form-item label="字典名称" prop="deviceTypeName">
        <el-input
          v-model="purForm.deviceTypeName"
          placeholder="请输入新增设备类型名称"
          maxlength="12"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="quxiao(purFormRef)">取消</el-button>
        <el-button type="primary" @click="queren(purFormRef)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElTree, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
const props = defineProps({
  deviceType: Boolean
})
const emit = defineEmits(['quxiao', 'queren'])
const formLabelWidth = ref('95px')
const purFormRef = ref<FormInstance>()
const purForm = ref({
  deviceTypeName: ''
})

const rules = reactive<FormRules>({
  deviceTypeName: [
    { required: true, message: '请输入设备类型名称', trigger: 'blur' }
  ]
})

const quxiao = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('quxiao')
}
const queren = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit('queren', purForm.value.deviceTypeName)
    }
  })
  purForm.value.deviceTypeName = ''
}
</script>
<style scoped lang="scss"></style>
